<template>
  <div>
    <div>
      <div v-if="canReject">
        <el-form-item label="是否同意">
          <el-radio-group v-model="form.isReject">
            <el-radio label="0">同意</el-radio>
            <el-radio label="1">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div v-if="show(4)">
        <el-form-item label="说明">
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
      </div>
    </div>
    <div v-if="isNextUser">
      <el-form-item label="处理人">
        <treeselect
          v-model="form.nextUser"
          :options="list"
          :normalizer="normalizer"
          disable-branch-nodes
          append-to-body
          :zIndex="9999"
          multiple
          style="width: 437px"
          placeholder="填写表单后选择下一节点处理人"
        />
      </el-form-item>
    </div>
    <div style="text-align: right">
      <el-button size="mini" @click="cancel">取 消</el-button>
      <el-button v-if="show(2)" size="mini" @click="save">保 存</el-button>
      <el-button v-if="show(3)" size="mini" type="primary" @click="apply">上 报</el-button>
      <el-button size="mini" v-if="show(4)" type="primary" @click="approve">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { getNextUsers, getReject } from '@/api/wf/workflow'

export default {
  name: 'PopBtn',
  props: {
    procDefkey: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    row: {
      type: Object,
      required: true
    },
    type: {
      type: Number,
      default: 1
    }
  },
  computed: {
    isNextUser: function() {
      return (this.show(3) || this.show(4)) && !this.isEnd && this.form.isReject == '0'
    },
    canReject: function() {
      return this.show(4) && this.rejectTo
    }
  },
  data() {
    return {
      form: {
        isReject: '0',
        description: '',
        // 下个节点是否会签
        multi: false,
        nextUser: null
      },
      ele: {
        reject: false

      },
      list: [],
      isEnd: false,
      rejectTo: null,
    }
  },
  mounted() {
    this.list = []
    const status = this.row.status
    if (status === '2' &&  this.type !== 1 &&  this.type !== 3 ) {
      this.loadOptions()
    }
    if (this.show(4)) {
      this.loadReject()
    }
  },
  methods: {
    loadReject() {
      getReject(this.row.procInstId).then(res => {
        this.rejectTo = res.data
      })
    },
    loadOptions() {
      const param = {
        procInstId: this.row.procInstId,
        procDefkey: this.procDefkey,
        entity: this.row
      }
      getNextUsers(param).then(res => {
        this.form.multi = res.data.id === '-3'
        this.isEnd = res.data.id === '-4'
        this.list = res.data.children || []
      })
    },
    normalizer(node) {
      if (node.children == null || !node.children.length) {
        delete node.children
      }

      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    show(value) {
      const status = this.row.status
      const type = this.type
      let show = false
      switch (value) {
        case 1:
          if (((status == '2' && this.type !== 1 && status != '5') || ((status == '0' || status == '1') && type == 1))
            && !this.isEnd
            && type !== 3
          ) {
            show = true
          }
          break
        case 2:
          if ((status == '0' || status == '1') && type !== 3) {
            show = true
          }
          break
        case 3:
          if ((status == '0' || status == '1')  && type !== 3) {
            show = true
          }
          break
        case 4:
          // 流程中， 并且不是启动人， 显示审批按钮
          if ((status === '2' &&  this.type !== 1) && type !== 3) {
            show = true
          }
          break
      }

      return show
    },
    save() {
      this.$emit('save', this.row)
    },
    apply() {
      this.row = Object.assign(this.row, this.form)
      this.$emit('apply', this.form, this.row)
    },
    approve() {
      if (this.form.isReject == '0' && !this.form.nextUser && !this.isEnd) {
        this.$message({
          message: '请选择下级处理人！',
          type: 'error'
        })
        return
      }

      this.form.id = this.row.id
      this.form.procInstId = this.row.procInstId
      if (this.form.isReject == '1') {
        this.form.procDefkey = this.rejectTo
        this.$emit('reject', this.row, this.form)
      } else {
        this.$emit('approve', this.row, this.form)
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>

</style>
